import React, { Component } from 'react';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
import {browserHistory,Link} from 'react-router';
import SweetAlert from 'react-bootstrap-sweetalert';
import { connect } from 'react-redux';
import { OrderCanceling } from '../../Redux/Actions/orderAction';


class AllOrder extends Component {

  constructor(props) {
    super(props)
    this.state = {
        products : []
    }
    this.toNeworder = this.toNeworder.bind(this);
  }

  componentWillMount(){
      this.props.dispatch(OrderCanceling(this.props.authReducer.user.data.token));
  }

  priceFormatter(cell, row){
    return <Link to={{pathname:"/main/cost",state:{orderId:row.id,backurl:"/main/orderall",profileId:row.userId}}}>详情</Link>;
  }
  carriageFormatter(cell, row){
    // if(cell != "null"){
      return <Link to={{pathname:"/main/transport",state:{orderId:row.id,backurl:"/main/orderall",profileId:row.userId}}}>详情</Link>;
    // }else{
    //   return "未开始";
    // }
  }
  openerdetail(cell,row){
    // if(cell == null){
    //   return <Link to={{pathname:"/openeradd",query:{orderId:row.id,carType:row.carType,carFrameNo:row.carFrameNo}}}>添加</Link>;
    // }else{
      return <Link to={{pathname:"/main/issuing",state:{orderId:row.id,backurl:"/main/orderall",profileId:row.userId}}}>详情</Link>;
    // }
  }
  applydetail(cell,row){
    // if(cell==null){
    //   return "暂无信息";
    // }else{
      return <Link to={{pathname:"/main/clearance",state:{orderId:row.id,backurl:"/main/orderall",profileId:row.userId}}}>详情</Link>;
    // }
  }
  operateFormatter(cell,row){
      return "是否取消";
  }

  toNeworder(){
    browserHistory.push('/neworder');
  }

  render() {
    const products = this.props.orderReducer.order.data;
    const options = {
        page: 1, 
        sizePerPageList: [],
        sizePerPage: 10, 
        pageStartIndex: 0,
        paginationSize: 3,  
        prePage: 'Prev', 
        nextPage: 'Next', 
        firstPage: 'First',
        lastPage: 'Last',
        paginationShowsTotal: this.renderShowsTotal, 
        noDataText: '目前无订单' 
      }
    const customStyle = {
          overlay : {
            position          : 'fixed',
            width             : '100%',
            top               : 0,
            left              : 0,
            right             : 0,
            bottom            : 0,
            backgroundColor   : 'rgba(255, 255, 255, 0.75)'
          },
          content : {
            position                   : 'absolute',
            width                      : '60%',
            height                     : '350px',
            top                        : '10%',
            left                       : '20%',
            right                      : '20%',
            border                     : '1px solid #ccc',
            background                 : '#fff',
            overflow                   : 'auto',
            WebkitOverflowScrolling    : 'touch',
            borderRadius               : '4px',
            outline                    : 'none',
            padding                    : '20px'

          }
    }
    return (
        <div className="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">			
          <div className="row">
            <ol className="breadcrumb">
              <li><a href="#"><span className="glyphicon glyphicon-home"></span></a></li>
              <li className="active" onClick={this.openModal}>订单</li>
            </ol>
          </div>
          <div className="row">
            <div className="col-lg-12">
              <div className="panel panel-default">
                <div className="panel-heading">带取消订单列表
                  {/*<button className="pull-right btn btn-primary" style={{marginTop:"6px"}} onClick={this.toNeworder}>新建</button>*/}
                </div>
                <div className="panel-body">
                  <BootstrapTable data={products} 
                      striped={true} hover={true} search={true} 
                      pagination={true} options={options} searchPlaceholder='请输入您要查询的信息'>
                      <TableHeaderColumn dataField="id" isKey={true} width="160px" dataAlign="center">订单号</TableHeaderColumn>
                      <TableHeaderColumn dataField="carType" dataAlign="center">车型</TableHeaderColumn>
                      <TableHeaderColumn dataField="carFrameNo" dataAlign="center">车架号</TableHeaderColumn>
                      <TableHeaderColumn dataField="Issuing" dataAlign="center" width="60px" dataFormat={this.openerdetail}>开证</TableHeaderColumn>
                      <TableHeaderColumn dataField="CustomsClearance" dataAlign="center" width="60px" dataFormat={this.applydetail}>报关</TableHeaderColumn>
                      <TableHeaderColumn dataField="Transport" dataAlign="center" width="60px" dataFormat={this.carriageFormatter}>运输</TableHeaderColumn>
                      <TableHeaderColumn dataField="fee"  dataAlign="center" width="60px" dataFormat={this.priceFormatter}>成本</TableHeaderColumn>
                      <TableHeaderColumn dataField="state" dataAlign="center" width="100px" dataFormat={this.operateFormatter}>操作</TableHeaderColumn>
                  </BootstrapTable>
                </div>
              </div>
            </div>
          </div>
          <div ref="alertwrap" id="alertwrap" style={{"display":"none"}}>
            <SweetAlert
              warning
              showCancel
              cancelBtnText="取消"
              confirmBtnText="确定"
              confirmBtnBsStyle="primary"
              cancelBtnBsStyle="default"
              //customIcon="thumbs-up.jpg"
              title="确定取消订单吗？"
              onConfirm={()=>{this.refs.alertwrap.style.display = "none"}}
              onCancel={()=>{this.refs.alertwrap.style.display = "none"}}
              >
              点击确定，将取消订单！
            </SweetAlert>
          </div>
        </div>
    )
  }
}
export default connect((state) => {
    const { authReducer,orderReducer } = state;
    return {
        authReducer,orderReducer
    }
})(AllOrder); 